import styles from './register.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { FieldValues, useForm } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';

export const Register = () => {
interface IInputs {
	email: string,
	password: string,
	fullName: string
}

const {
	register,
	handleSubmit,
	watch,
	formState: { errors }
} = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
/* для  DevTool зависимостью является control*/
return (
	<div>
		{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
		<h2>Регистрация</h2>
		<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
			<div className={styles.input}>
				<label htmlFor="email">Ваш email</label>
				<input
					id="email"
					{...register('name', {
						required: 'Обязательное поле',
						validate: {
							isAdmin: (fieldValue) => {
								return fieldValue !== 'admin' || 'Используйте другое имя';
							},
							isOleg: (fieldValue) => {
								return fieldValue !== 'Олег' || 'Используйте другое имя';
							}
						}
					})}
					type="text"
				/>
				{/* {errors.name?.message && <p style={{ color: 'red' }}>{errors.name?.message}</p>} */}
			</div>
			<div className={styles.input}>
				<label htmlFor="password">Ваш пароль</label>
			</div>
			<div className={styles.input}>
				<label htmlFor="fullName">Ваше имя</label>
			</div>
			<Button appearance="big">Зарегистрироваться</Button>
		</form>
		<DevTool control={control} />
		<div className={styles.navigation}>
			<div>
          Есть аккаунт?{' '}
				<Link
					style={{ color: '#ffa600' }}
					className={styles.href}
					to="/auth/login"
				>
            Войти
				</Link>
			</div>
			<div>
				<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
				</Link>
			</div>
		</div>
	</div>
);
};
